<template>
  <div class="ol-map" id="olMap"></div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'
import Map from 'ol/Map'  // OpenLayers的主要类，用于创建和管理地图  
import View from 'ol/View'  // OpenLayers的视图类，定义地图的视图属性     
import { Tile as TileLayer } from 'ol/layer'  // OpenLayers的瓦片图层类         
import { XYZ, OSM } from 'ol/source'  // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源         
import { fromLonLat, toLonLat } from 'ol/proj'  // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换    
import {
  defaults as defaultInteractions,
  DragRotateAndZoom,
} from 'ol/interaction'  // OpenLayers的交互类，包括默认的交互集合和特定的旋转缩放交互         
import { defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control'  // OpenLayers的控件类，包括默认的控件集合和特定的全屏、鼠标位置、比例尺控件         
import Feature from 'ol/Feature'  // OpenLayers的要素类，表示地图上的一个对象或实体          
import Point from 'ol/geom/Point'  // OpenLayers的点几何类，用于表示点状的地理数据        
import { Vector as VectorLayer } from 'ol/layer'  // OpenLayers的矢量图层类，用于显示矢量数据        
import { Vector as VectorSource } from 'ol/source'  // OpenLayers的矢量数据源类，用于管理和提供矢量数据       
import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from "ol/style"  // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标       
import LineString from 'ol/geom/LineString'  // OpenLayers的线几何类，用于表示线状的地理数据       
import tb from '@/assets/image/hyfw.png'  // 导入一个图片资源        
import Polygon from "ol/geom/Polygon"  // OpenLayers的多边形几何类，用于表示面状的地理数据
import Overlay from 'ol/Overlay'

onMounted(() => {
  // 地图初始化
  initOLMap()
  dotMethod()
  faceMethod()
  lineMethod()
  createPopup()

  // setTimeout(() => {
  //   map.getOverlays().clear();
  // }, 2000);
  // setTimeout(() => {
  //   createPopup()
  // }, 4222);


})

let map: any = null
/**
* Date:2024/3/26
* Author:zx
* Function:【初始化地图】
* @param 无
*/
// 设置边界为中国的大陆范围
const extent = [73.8, 3.9, 135.1, 53.5]; // 左下角经纬度和右上角经纬度
function initOLMap() {
  // 创造地图实例
  map = new Map({
    // 设置地图容器的ID
    target: 'olMap',
    extent: extent, // 应用边界限制
    // 定义地图的图层列表，用于显示特定的地理信息。
    layers: [
      // 高德地图
      // TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
      new TileLayer({
        // 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
        source: new XYZ({
          url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        })
      })
    ],
    // 设置地图的视图参数
    // View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
    view: new View({
      // fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
      center: fromLonLat([108.924652, 34.208527]),//地图中心点
      zoom: 5,// 缩放级别
      minZoom: 4,// 最小缩放级别
      maxZoom: 6,// 最大缩放级别
      constrainResolution: true// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
    })
  })
  // 监听wheel事件
  map.getTargetElement().addEventListener('wheel', function(event) {
    // 阻止滚轮事件的默认行为
    event.preventDefault();
  });
}


/**
  * Date:2024/3/26
  * Author:zx
  * Function:【点】
  * @param 无
  */
const dotMethod = () => {
  // 创建点特征（Feature）:
  let feature = new Feature({
    title: 'xian',
    geometry: new Point(fromLonLat([108.924652, 34.208527])) // 转换坐标
  })
  // 设置特征样式（Style）:
  feature.setStyle(
    new Style({
      // 使用 CircleStyle 创建一个圆形的点 

      image: new CircleStyle({
        fill: new Fill({
          color: 'red',
        }),
        radius: 7,
      }),
    })
  );
  // 创建和添加特征到源（Source）
  // VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
  let source = new VectorSource()
  source.addFeature(feature)
  // 创建图层并设置源（Layer）
  // VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
  let layer = new VectorLayer()
  layer.setSource(source)
  map.addLayer(layer)
}
/**
 * Date:2024/3/26
 * Author:zx
 * Function:【面】
 * @param 无
 */
const faceMethod = () => {
  // 定义多边形的坐标数组，这里使用一个简单的正方形作为示例
  let coordinates = [
    [
      fromLonLat([108.924652, 34.208527]),
      fromLonLat([108.925652, 34.208527]),
      fromLonLat([108.925652, 34.209527]),
      fromLonLat([108.924652, 34.209527]),
      fromLonLat([108.924652, 34.208527])
    ]
  ];

  // 创建多边形的几何对象
  let polygon = new Polygon(coordinates);

  // 创建特征（Feature）
  let polygonFeature = new Feature({
    geometry: polygon
  });

  // 设置多边形的样式（Style）
  polygonFeature.setStyle(
    new Style({
      stroke: new Stroke({
        color: 'red', // 多边形边界线的颜色
        width: 2 // 多边形边界线的宽度
      }),
      fill: new Fill({
        color: 'rgba(255, 0, 0, 0.5)' // 多边形填充颜色，这里设置为半透明红色
      })
    })
  );

  // 创建和添加特征到源（Source）
  let source = new VectorSource();
  source.addFeature(polygonFeature);

  // 创建图层并设置源（Layer）
  let layer = new VectorLayer();
  layer.setSource(source);

  // 将图层添加到地图上
  map.addLayer(layer);
}
/**
 * Date:2024/3/26
 * Author:zx
 * Function:【线】
 * @param 无
 */
const lineMethod = () => {
  // 创建线特征（Feature）:
  let lineFeature = new Feature({
    geometry: new LineString([
      fromLonLat([108.924652, 34.208527]), // 起点经纬度坐标
      fromLonLat([108.92314996295164, 34.220681741967226]), // 终点经纬度坐标
      // 你可以在这里添加更多的坐标点，以绘制更复杂的线
    ])
  });

  // 设置线特征的样式（Style）:
  lineFeature.setStyle(
    new Style({
      stroke: new Stroke({
        color: 'red', // 线的颜色
        width: 2 // 线的宽度
      })
    })
  );

  // 创建和添加特征到源（Source）
  let source = new VectorSource();
  source.addFeature(lineFeature);

  // 创建图层并设置源（Layer）
  let layer = new VectorLayer();
  layer.setSource(source);

  // 将图层添加到地图上
  map.addLayer(layer);
}
/**
 * Date:2024/3/26
 * Author:zx
 * Function:【添加popup】
 * @param 无
 */
const createPopup = () => {
  // 创建一个弹出窗口容器元素
  const popupContainer = document.createElement('div');
  popupContainer.setAttribute('id', 'popup');
  popupContainer.innerHTML = '<p>点我</p>';
  popupContainer.style.height = '50px';
  popupContainer.style.fontSize = '20px';
  popupContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // 设置背景颜色，这里使用了半透明白色
  popupContainer.style.textAlign = 'center';
  popupContainer.style.padding = '10px';
  popupContainer.style.border = '1px solid #ccc';
  popupContainer.style.color = 'red';
  // 创建一个 Overlay 实例，将弹出窗口容器元素添加到 Overlay 中
  const popupOverlay = new Overlay({
    element: popupContainer,
    autoPan: {
      animation: {
        duration: 250 // 设置自动平移动画的持续时间，单位为毫秒
      }
    }
  });

  // 将 Overlay 添加到地图上
  map.addOverlay(popupOverlay);
  // 监听Overlay的点击事件
  popupOverlay.getElement().addEventListener('click', function() {
    // 处理点击事件
    alert('Overlay点被点击了！');
  });
  // 获取Overlay的容器元素
  var overlayElement = popupOverlay.getElement();
    // 为该元素添加鼠标移入事件监听
    overlayElement.addEventListener('mouseenter', function() {
    // 鼠标移入时的处理逻辑
    console.log('Mouse entered overlay');
    createPopup();
  });
  // 为该元素添加鼠标移出事件监听
  overlayElement.addEventListener('mouseleave', function() {
    // 鼠标移出时的处理逻辑
    console.log('Mouse left overlay');
  });



  // 设置弹出窗口的位置（示例位置）
  const popupPosition = fromLonLat([108.924652, 34.208527]); // 替换 longitude 和 latitude 为实际的经纬度值
  popupOverlay.setPosition(popupPosition);

  // 显示弹出窗口
  popupContainer.style.display = 'block';
}
</script>

<style scoped lang="scss">
#olMap{
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
}</style>
